<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link rel="stylesheet" type="text/css" href="${APP_PATH}/static/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="${APP_PATH}/style/regStyle.css">
<script src="${APP_PATH}/static/jquery/jquery-3.4.1.js"></script>

</head>
<body>

	<!--注册头部-->
	<div id="reg_header">
		<div class="reg_h_center">
			<h3>欢迎注册</h3>
			<div class="reg_h_right">
				<span>已有账户!</span><a style="color: #0066FF" href="login.jsp">请登录</a>
			</div>
		</div>
	</div>
	<br />
	<br />
	<br />
	<!-- style="width: 1100px;float:right" -->
	<div style="background-color:#F8F8F8 ; height: 400px">
	<br />
	
	<div style="margin-left: 500px;margin-top: 10px">
		<label> 用户注册</label>
	</div>
	<div class="modal-body" style="margin-left: 500px;">

		<form class="form-horizontal" role="form" >

			<div class="form-group">
				<label class="col-sm-2 control-label"> 用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="userName"
						name="userName" placeholder="用户名"> <span id="helpBlock2"
						class="help-block"></span>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">密 码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="userPwd"
						name="userPwd" placeholder="密 码"> <span id="helpBlock2"
						class="help-block"></span>
				</div>
			</div>
			<div  class="form-group">
				<label for="email" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="email" name="email"
						placeholder="邮箱"> <span id="helpBlock2" class="help-block"></span>
				</div>
			</div>
			<div  class="form-group" >
				<label for="email" class="col-sm-2 control-label">验证码</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="code" name="code"
						placeholder="验证码"> <img id="imgObj" style="height: 23px;float: right;margin-top: 10px"
						alt="验证码" src="${APP_PATH}/code" onclick="changeImg()" /> 
						<span id="helpBlock2" class="help-block"></span>
				</div>
			</div>

			<div style="height: 20px; text-align: center; color: red;">
				<div style="text-align: center; color: red">
					<input class="btn btn-primary" type="button" id="regist" value="注册" />
				</div>
				<span id="msgs"> </span>
			</div>
		</form>

		
	</div>
</div>
	<%@include file="/footer.jsp" %>
	<script type="text/javascript">
		function changeImg() {
			var imgSrc = $("#imgObj");
			var src = imgSrc.attr("src");
			imgSrc.attr("src", chgUrl(src));
		}
		//时间戳   
		//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
		function chgUrl(url) {
			var timestamp = (new Date()).valueOf();
			url = url.substring(0, 17);
			if ((url.indexOf("&") >= 0)) {
				url = url + "×tamp=" + timestamp;
			} else {
				url = url + "?timestamp=" + timestamp;
			}
			return url;
		}
	</script>
	<script type="text/javascript">
		var checkResult_name = false;
		var checkResult_email=false;
		
		//1.对姓名进行正则表达式校验
		function checkNameForReg() {
			//1.姓名验证：姓名必须由2~10位大小写英文字母、空格、中文组成
			var regName =/^\w{2,10}$/;
			var nameVal = $("#userName").val();
			if(!regName.test(nameVal)){
				$("#userName").next("span").text("用户名不合规范，用户名要求2-10位");
				$("#userName").parent().addClass("has-error");
				return false;
			}else{
				$("#userName").next("span").empty();
				$("#userName").parent().removeClass("has-error has-success");
				$("#userName").parent().addClass("has-success");
				return true;
			}
		}
		
		//2.对邮箱进行正则表达式校验
		function checkEmailForReg() {
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			var emailVal = $("#email").val();
			if(!regEmail.test(emailVal)){
				$("#email").next("span").text("邮箱不符合格式");
				$("#email").parent().addClass("has-error");
				return false;
			}else{
				$("#email").next("span").empty();
				$("#email").parent().removeClass("has-error has-success");
				return true;
			}
		}
		$("#userName").blur(function() {
			//1.对姓名进行正则表达式校验
		if(checkNameForReg()){
			//2.姓名进行重名校验
			$.ajax({
				url : "${APP_PATH}/toUserName",
				type : "POST",
				data : {
					"userName" : $(this).val()
				},
				success : function(result) {	
					if (result.data.iRet == 0) {
						$("#userName").next("span").text("可以使用该用户名");
						$("#userName").parent().addClass("has-success");
						checkResult_name = true;
					} else {
						$("#userName").parent().addClass("has-error");
						$("#userName").next("span").text("该姓名已存在");
						checkResult_name = false;
					}
				}
			});
		}
		});
		//当邮箱文本框失去焦点时，对其进行正则检验
		$("#email").blur(function() {
			if(checkEmailForReg()){
				checkResult_email = true;
			}else{
				checkResult_email = false;
			}
		});
		//-----//
		$("#regist").click(function() {
			
			if(checkNameForReg()&&checkEmailForReg()){
			$.ajax({
				url : "toRegist",
				type : "post",
				data : $("form").serialize(),
				success : function(data) {
					if (data.type == 'error') {
						$("#code").next().next("span").text(data.msg);
						$("#code").parent().addClass("has-error");
						//$("#msgs").text(data.msg);
					} else {
						alert(data.msg);
						window.location.href = "login.jsp";
					}
				}

			});
			}

		});
	</script>
</body>
</html>


